import React from 'react';
import {
  Image,
  Pressable,
  ScrollView,
  StyleSheet,
  Text,
  View,
  ViewStyle,
} from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { RootStackNavigationProp } from '../../types';
import { LiveCourse } from '../../shared/interfaces/live-course.interface';
import { scheduleList } from '../../constants/DataList';

interface AppointmentCourseCardProp {
  course: LiveCourse;
  style?: ViewStyle;
}

function AppointmentCourseCard(prop: AppointmentCourseCardProp) {
  const { course, style } = prop;
  const navigation = useNavigation<RootStackNavigationProp<'LiveCourse'>>();
  const openCourse = () => {
    navigation.navigate('LiveCourse');
  };

  const styles = cardStyles;

  return (
    <Pressable onPress={openCourse}>
      <View style={[styles.container, style]}>
        <View style={styles.time}>
          <Text style={styles.date}>{course.date}</Text>
          <Text style={styles.startTime}>{course.startTime}</Text>
          <Text style={styles.endTime}>{course.endTime} 结束</Text>
        </View>
        <View style={styles.info}>
          <Text style={styles.title}>{course.title}</Text>
          <View style={styles.detail}>
            <Text style={styles.subTitle}>{course.durationMinutes}</Text>
            <Text style={styles.subTitleGray}>分钟·</Text>
            <Text style={styles.subTitle}>{course.consumption}</Text>
            <Text style={styles.subTitleGray}>千卡·</Text>
            <Text style={styles.subTitle}>{course.level}</Text>
            <Text style={styles.subTitleGray}>{course.levelName}</Text>
          </View>
          <View style={styles.user}>
            <Text style={styles.trainerName}>已预约 · </Text>
            <Text style={styles.trainerName}>{course.trainer.name}教练</Text>
          </View>
        </View>
        <Image style={styles.cover} source={{ uri: course.trainer.avatar }} />
      </View>
    </Pressable>
  );
}

export default function AppointmentCourseList() {
  return (
    <ScrollView style={styles.container}>
      <AppointmentCourseCard style={styles.card} course={scheduleList[0]} />
      <AppointmentCourseCard style={styles.card} course={scheduleList[1]} />
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 12,
  },
  card: {
    backgroundColor: '#fff',
    borderRadius: 6,
    overflow: 'hidden',
    flexDirection: 'row',
    marginBottom: 12,
  },
});

const cardStyles = StyleSheet.create({
  container: {
    height: 90,
    backgroundColor: '#fff',
    borderRadius: 6,
    padding: 6,
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  time: {
    paddingHorizontal: 6,
    alignItems: 'flex-start',
  },
  date: {
    fontSize: 20,
    lineHeight: 30,
    fontWeight: 'bold',
    fontFamily: 'DIN Alternate',
  },
  startTime: {
    fontSize: 32,
    lineHeight: 32,
    fontWeight: 'bold',
    fontFamily: 'DIN Alternate',
  },
  endTime: {
    fontSize: 12,
    color: '#666',
    fontWeight: 'bold',
    fontVariant: ['tabular-nums'],
  },
  info: {
    paddingHorizontal: 6,
    paddingVertical: 4,
  },
  detail: {
    flexDirection: 'row',
    marginBottom: 6,
  },
  title: {
    fontSize: 16,
    fontWeight: 'bold',
    marginBottom: 6,
  },
  subTitle: {
    fontSize: 12,
    marginRight: 2,
  },
  subTitleGray: {
    color: '#666',
    fontSize: 12,
  },
  user: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  trainerName: {
    color: '#666',
  },
  cover: {
    height: 64,
    width: 64,
    borderRadius: 32,
    paddingHorizontal: 6,
    alignSelf: 'center',
  },
});
